<template>
    <div>
        <h1 style="text-align:center">报销单信息</h1>
        <el-table
            ref="multipleTable"
            :data="tableData"
            size="mini"
            stripe
            border
            @selection-change="handleSelectionChange"
            style="width: 91%;margin:auto;">
            <el-table-column
              type="selection"
              width="40"
              align="left">
            </el-table-column>
            <el-table-column
              prop="expense_id"
              label="报销单ID"
              width="100"
              align="center"
              v-if="false"
            >
            </el-table-column>
            <el-table-column
              prop="application_date"
              label="报销单日期"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="date_type"
              label="日期类型"
              width="100"
              align="center"
              :formatter="formatterDateType"
            >
            </el-table-column>
            <el-table-column
              prop="application_id"
              label="申请表ID"
              width="100"
              align="center"
              v-if="false"
            >
            </el-table-column>
            <el-table-column
              prop="username"
              width="100"
              label="报销人员"
              align="center">
            </el-table-column>
            <el-table-column
              prop="create_user"
              width="100"
              label="创建人员"
              align="center">
            </el-table-column>
            <el-table-column
              prop="project_name"
              label="项目名称"
              show-overflow-tooltip
              width="170"
              align="center">
            </el-table-column>
            <el-table-column
              prop="auditor"
              width="100"
              label="审核人"
              align="center">
            </el-table-column>


            <el-table-column
              prop="statu"
              label="报销状态"
              width="100"
              align="center">
            </el-table-column>
            <el-table-column
              prop="fee"
              label="报销总金额"
              width="80"
              align="center">
            </el-table-column>

            <el-table-column
              prop="expense_cause"
              width="150"
              label="事由"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="audit_comments"
              label="审核意见"
              v-if="false"
              width="170"
              align="center">
            </el-table-column>


            <el-table-column
              prop="expense_type"
              label="报销类别标记"
              width="120"
              align="center"
              v-if="false"
            >
            </el-table-column>
            <el-table-column
              prop="expense_status"
              label="报销标记"
              width="90"
              align="center"
              v-if="false">
            </el-table-column>
          </el-table>
          <div style="text-align: left;margin-top: 10px">
            <el-button type="danger" size="mini" v-if="tableData.length>0"
                       :disabled="multipleSelection.length==0"
                       @click="callbackMany">批量打回
            </el-button>
            <el-button type="success" icon="el-icon-check" size="mini" v-if="tableData.length>0"
                       :disabled="multipleSelection.length==0"
                       @click="auditMany">批量审核
            </el-button>
             <el-pagination background
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[5, 10, 50, 100]"
                           :page-size="pagesize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total.length">
            </el-pagination>
          </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            positionid:[],//职位id
            tableData:[],
            multipleSelection:[],
            pagesize: 5,
            currentPage: 1,
            total:[],
            exComm:'',
        }
    },
    mounted:function(){
        this.loadTableData()
    },
    methods:{
        loadTableData() {
        var _this = this;
        this.loading = true;
        var param = {
            audit_status:0,
            position_id:this.positionid,
        };
        this.postRequest("/expense/control",param).then(resp => {
          _this.loading = false;
          if (resp && resp.status == 200) {
            _this.total = resp.data;

            _this.tableData = resp.data.slice(
              (_this.currentPage - 1) * _this.pagesize,
              _this.currentPage * _this.pagesize
            );
          }
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
       //显示数据量变更
      handleSizeChange(data) {
        this.pagesize = data;
        this.tabData = this.total.slice(
          (this.currentPage - 1) * this.pagesize,
          this.currentPage * this.pagesize
        );
        this.loadTableData();
      },
      handleCurrentChange(data) {
        this.currentPage = data;
        this.tabData = this.total.slice(
          (this.currentPage - 1) * this.pagesize,
          this.currentPage * this.pagesize
        );
        this.loadTableData();
      },
      //码值转换
      formatterDateType(row,column){
          if(row.date_type == 1){
                return "工作日加班";
            }else if(row.date_type == 2){
                return "周末加班";
            }else if(row.date_type == 3){
                return "法定节假日加班";
            }
      },
      // 批量打回
      callback1(ids) {
        var _this = this;
        this.loading = true;
        this.postRequest("/expense/callback", {
          ids: ids,
          expCom: this.exComm
        }).then(resp => {
          this.loading = false;
          if (resp && resp.status == 200) {
          }
          this.loadTableData();
          _this.$message({type:"info",message:"批量打回成功"});
        });
      },
      auditMany() {
        var _this = this;
        this.$confirm(
          "批量审核" + this.multipleSelection.length + "条数据, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).then(() => {
            var multipleSelection = _this.multipleSelection;
            var ids = "";
            var array = [];
            multipleSelection.forEach(row => {
              if (row.audit_status == 0) {
                array.push(row.expense_id);
              }
            });
            _this.audit1(array);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消批量审核"
            });
          });
      },
      //批量审核
      audit1(ids) {
        var _this = this;
        this.loading = true;
        this.postRequest("/expense/audit", {
          ids: ids,
          expCom: this.exComm
        }).then(resp => {
          this.loading = false;
          if (resp && resp.status == 200) {
          }
          this.loadTableData();
        });
      },
      callbackMany() {
        var _this = this;
        this.$confirm(
          "批量打回" + this.multipleSelection.length + "条数据, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            var multipleSelection = _this.multipleSelection;
            var ids = [];
            multipleSelection.forEach(row => {
              if (row.audit_status == 0) {
                ids.push(row.expense_id);
              }
            });
            _this.callback1(ids);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消批量打回"
            });
          });
      },
      // 批量打回
      callback1(ids) {
        var _this = this;
        this.loading = true;
        this.postRequest("/expense/callback", {
          ids: ids,
          expCom: this.exComm
        }).then(resp => {
          this.loading = false;
          if (resp && resp.status == 200) {
          }
          this.loadTableData();
          _this.$message({type:"info",message:"批量打回成功"});
        });
      },
    }
}
</script>

